<template>
  <!-- 折线图 -->
  <div class="lineChart" ref="lineChart"></div>
</template>

<script>
// 引入echarts包
import * as echarts from "echarts";
export default {
  name: "LineChart",
  mounted() {
    echarts.init(this.$refs.lineChart).setOption({
      xAxis: {
        type: "category",
        show: false,
      },
      yAxis: {
        show: false,
      },
      series: {
        type: "line",
        data: [10, 32, 12, 70, 45, 10, 50],
        // 平滑曲线
        smooth:true,
        // 取消拐点
        itemStyle: {
          opacity: 0,
        },
        // 设置折线颜色
        lineStyle:{
            color:'yellowgreen'
        },
        // 设置填充渐变色
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "yellowgreen", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      // 布局
      grid: {
        left: 0,
        top: 2,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.lineChart {
  width: 100%;
  height: 100%;
}
</style>